import React, { Component } from 'react';
import Header from './components/Header/Header';
import List from './components/List/List';
import Buttom from './components/Buttom/Buttom';

export default  class TodoList extends Component {
    state = {
        thingsList:[
            {
                id:1,
                name:'打代码',
                checked:false
            },
            {
                id:2,
                name:'睡觉',
                checked:false
            },
            {
                id:3,
                name:'吃饭',
                checked:false
            }
        ]
    }
    /**
     * 新增一条数据
     */
    onAddRow = (toDoObj)=>{
        let {thingsList} = this.state
        let newList = [toDoObj,...thingsList]
        this.setState({thingsList:newList})
    }
    /**
     * 全部变成已完成 
     */
    onAllChoose = (bol)=>{
        let {thingsList} = this.state
        let newList =  thingsList.map(val=>{
            return {
                ...val,
                checked:bol
            }
        })
        this.setState({thingsList:newList})
    }
    /**
     * 清除所有已完成
     */
    onClearAllCompalte = ()=>{
        let {thingsList} = this.state
        let newList =  thingsList.filter(val=>{
             return !val.checked
         })
         this.setState({thingsList:newList})
    }
    /**
     * 选中一行
     */
    onChooseRow = (id,value)=>{
        let {thingsList} = this.state
        let newList =  thingsList.map(val=>{
            return id == val.id?{...val,checked:value}:val
        })
        this.setState({thingsList:newList})
    }
    /**
     * 删除一行
     */
    onDeletRow = (row)=>{
        let {thingsList} = this.state
        let newList =  thingsList.filter(val=>{
            return row.id != val.id
        })
        this.setState({thingsList:newList})
    }
    render() {
        let {thingsList} = this.state
        return (
            <div>
                <Header 
                    onAddRow={this.onAddRow}
                />
                <List 
                    thingsList={thingsList} 
                    onChooseRow={this.onChooseRow}
                    onDeletRow = {this.onDeletRow}
                />
                <Buttom 
                    thingsList={thingsList} 
                    onAllChoose={this.onAllChoose}
                    onClearAllCompalte = {this.onClearAllCompalte}
                />
            </div>
        );
    }
}

